<template>
	<view class="customer-service">
		<!-- 滚动区域 -->
		<scroll-view class="chat-content" scroll-y="true" :scroll-top="scrollTop" @scroll="handleScroll"
			:scroll-with-animation="true">
			<view class="chat-content-inner">
				<!-- 遍历聊天消息 -->
				<view v-for="(msg, index) in chatMessages" :key="index"
					:class="['chat-message', msg.isMine ? 'mine' : 'other', msg.isOrder ? 'order-message' : '']">
					<!-- 他人消息 - 头像在左 -->
					<view v-if="!msg.isOrder && !msg.isMine" class="chat-avatar left-avatar">
						<image :src="otherAvatar" mode="aspectFill"></image>
					</view>

					<!-- 订单消息卡片 -->
					<view v-if="msg.isOrder" class="order-card">
						<!-- 订单内容保持原逻辑 -->
						<view class="order-info">
							<view class="order-top">
								<view class="order-status-tag"
									:style="{ background: getStatusStyles(msg.orderInfo.status_text).bg, color: getStatusStyles(msg.orderInfo.status_text).color }">
									{{ getStatusText(msg.orderInfo.status_text) }}
								</view>

								<image class="status-img" :src="msg.orderInfo.status_image" mode="widthFix"></image>
								<text class="order-title">{{ msg.orderInfo.title }}</text>
							</view>

							<!-- 人员、时间、技能行 -->
							<view class="order-middle">
								<text class="people-time" v-if="msg.orderInfo.people_num">{{ msg.orderInfo.people_num
								}}</text>
								<text class="people-time" v-if="msg.orderInfo.person_info">{{ msg.orderInfo.person_info
								}}</text>
								<text class="people-time" v-if="msg.orderInfo.time_range">{{ msg.orderInfo.time_range
								}}</text>
								<text class="people-time" v-if="msg.orderInfo.skill_des">{{ msg.orderInfo.skill_desc
								}}</text>
							</view>

							<!-- 地址、距离行 -->
							<view class="order-bottom">
								<view class="order-bottom-vertical">
									<text class="address">地点：{{ msg.orderInfo.address }}</text>
									<text class="distance">距您：{{ msg.orderInfo.distance_info }}</text>
								</view>
								<image :src="getFullImageUrl('@/static/release/dh.png')" class="arrow"
									@click="gotoNavigation(msg.orderInfo)"></image>
							</view>
							<hr style="height: 1rpx; background: #D0D4D7; margin: 30rpx -25rpx" />

							<!-- 酬金行 -->
							<view class="salary">
								<text>酬金： {{ msg.orderInfo.salary }}</text>
								<!-- <image class="arrow" src="/static/image/logo.jpg" mode="widthFix"></image> -->
							</view>
						</view>
					</view>

					<!-- 普通文本消息 -->
					<view v-else class="chat-bubble" :style="{
						backgroundColor: msg.isMine ? '#A1EB70' : '#FFFFFF',
						// 自己消息右对齐，他人消息左对齐
						marginLeft: msg.isMine ? 'auto' : '0',
						marginRight: msg.isMine ? '0' : 'auto',
						maxWidth: '60%' // 限制气泡最大宽度，超出自动换行
					}">
						{{ msg.content }}
					</view>

					<!-- 自己消息 - 头像在右 -->
					<view v-if="!msg.isOrder && msg.isMine" class="chat-avatar right-avatar">
						<image :src="myAvatar" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 发订单按钮 -->
		<view class="send-order-btn" @click="openOrderModal">发订单</view>
		<!-- 输入与操作栏 -->
		<view class="input-bar">
			<input class="chat-input" v-model="inputValue" placeholder="输入发送内容" @confirm="sendMessage" />
			<view class="icons-container">
				<image class="emoji-icon" :src="getFullImageUrl('@/static/my/biaoqing.png')" mode="widthFix"></image>
				<view v-if="inputValue.trim()" class="send-btn" @click="sendMessage">发送</view>
				<image v-else class="add-icon" :src="getFullImageUrl('@/static/my/gengduo.png')" mode="widthFix"></image>
			</view>
		</view>

		<!-- 订单选择弹框 -->
		<view class="modal-mask" v-if="showOrderModal">
			<orderWindow @close="closeOrderModal" @sendOrder="handleSendOrder" @click.stop class="win"></orderWindow>
		</view>
	</view>
</template>

<script>
import orderWindow from './orderWindow/orderWindow.vue'
import { request, getFullImageUrl, initBaseUrl } from '../../../utils/request';
import { ORDER_STATUS, JOB_STATUS, getOrderStatusText, getJobStatusText, getStatusClass, getStatusStyle, getMyStatusStyle } from '../../../utils/status';

// 导入WebSocket工具函数
import { initWebSocket, closeWebSocket } from '../../../utils/websocket';

export default {

	components: {
		orderWindow
	},
	data() {
			return {
				// 聊天消息数据，实际可从接口获取
				chatMessages: [
					{ content: "您好,我是你的客服,如果有什么问题都可以来询问我", isMine: false, isOrder: false },
					// { content: "好的，您反馈的问题我们马上核查一下，给您回复", isMine: true },
					// 可继续添加更多聊天记录
				],
			inputValue: "",
			showOrderModal: false, // 添加订单弹窗显示状态变量
			// 添加头像URL和消息类型标记
			myAvatar: '/static/image/logo.jpg', // 替换为实际头像路径
			otherAvatar: '/static/image/logo.jpg', // 替换为实际头像路径
			scrollTop: 0,
			oldScrollTop: 0,
			// 新增变量控制是否自动滚动
			autoScroll: true,
		};
	},
	// computed: {
	// 	// 根据当前选中的主分类，返回对应的状态标签
	// 	// currentStatusTabs() {
	// 	// 	return this.statusTabs[this.currentMainTab];
	// 	// },
	// 	// 根据当前选中的分类和状态，筛选订单
	// 	// filteredOrders() {
	// 	// 	// 实际项目中应根据currentMainTab和currentStatusTab从接口获取对应数据
	// 	// 	return this.orders;
	// 	// },
	// },
	methods: {
		getFullImageUrl,
		// 新增：处理接收到的WebSocket消息
		handleWebSocketMessage(data) {
			try {
				const message = JSON.parse(data);
				// 判断是否是客服发送的消息
				if (message.type === 'service_to_customer_chat') {
					this.autoScroll = true;
					if (message.is_order === 1) {
						// 订单消息
						let orderInfo = null;
						if (message.order_info) {
							try {
								orderInfo = JSON.parse(message.order_info);
							} catch (e) {
								console.error('解析order_info失败:', e);
							}
						}
						this.chatMessages.push({
							content: message.content,
							isMine: false,
							isOrder: true,
							orderInfo: orderInfo || {
								title: '未知订单',
								status: 0,
								people_num: '未知',
								person_info: '未知',
								time_range: '未知',
								skill_desc: '未知',
								address: '未知',
								distance_info: '未知',
								salary: '未知'
							}
						});
					} else {
						// 普通文本消息
						this.chatMessages.push({
							content: message.content,
							isMine: false,
							isOrder: false
						});
					}
				}
			} catch (error) {
				console.error('解析WebSocket消息失败:', error);
			}
		},
		// 新增：导航功能
		gotoNavigation(order) {
			// 调用uni-app的地图导航API
			uni.openLocation({
				latitude: parseFloat(order.latitude),
				longitude: parseFloat(order.longitude),
				name: '目的地',
				address: order.address,
				success: () => {
					console.log('导航已打开');
				},
				fail: (err) => {
					console.error('打开导航失败', err);
					uni.showToast({
						title: '无法打开导航',
						icon: 'none'
					});
				}
			});
		},
		sendMessage() {
			if (this.inputValue.trim()) {

				// 调用sendToCustomerService接口
				request({
					url: '/Kefu/sendToCustomerService',
					method: 'POST',
					data: {
						content: this.inputValue.trim(),
						is_order: 0, // 默认为普通消息
						order_id: null
					},
					success: (res) => {
						if (res.data.code === 1) {
							this.autoScroll = true; // 发送新消息时启用自动滚动
							// 使用Vue.set或扩展运算符确保响应式更新
							this.chatMessages = [...this.chatMessages, { content: this.inputValue.trim(), isMine: true }];
							this.inputValue = "";
							uni.showToast({ title: '发送成功', icon: 'success' });
						} else {
							uni.showToast({ title: res.data.msg || '发送失败', icon: 'none' });
						}
					},
					fail: (err) => {
						console.error('发送消息失败', err);
						uni.showToast({ title: '网络异常，发送失败', icon: 'none' });
					}
				});
			}
		},
		selectOrder(index) {
			this.selectedOrder = index;
		},
		confirmOrder() {
			if (this.selectedOrder !== -1) {
				const selected = this.currentOrders[this.selectedOrder];
				this.chatMessages.push({
					content: `发送订单：${selected.title} 酬金：${selected.money}`,
					isMine: true,
					isOrder: true
				});
				this.showOrderModal = false;
				this.selectedOrder = -1;
				this.scrollToBottom(); // 发送订单后滚动到底部
			}
		},
		// 添加滚动到底部方法
		scrollToBottom() {
			if (this.autoScroll) {
				this.$nextTick(() => {
					this.scrollTop = Date.now(); // 使用时间戳确保每次值不同
				});
			}
		},
		// 新增滚动事件处理
		handleScroll(e) {
			// 当用户手动向上滚动时，禁用自动滚动
			const scrollTop = e.detail.scrollTop;
			const scrollHeight = e.detail.scrollHeight;
			const clientHeight = this.getScrollViewHeight();

			// 如果接近底部(距离底部小于100px)，重新启用自动滚动
			this.autoScroll = scrollHeight - (scrollTop + clientHeight) < 100;
		},
		getScrollViewHeight() {
			return uni.getSystemInfoSync().windowHeight - 200; // 根据实际情况调整
		},
		openOrderModal() {
			this.showOrderModal = true;
			// 小程序可能需要强制更新视图
			this.$forceUpdate();
			console.log('订单弹窗状态:', this.showOrderModal);
		},
		closeOrderModal() {
			this.showOrderModal = false;
			console.log('订单弹窗已关闭');
		},
		// 添加订单发送处理方法
		handleSendOrder(order) {
			if (!order) return;
			// 构造完整的订单消息对象
			const orderMessage = {
				isMine: true,
				isOrder: true,
				orderInfo: {
					title: order.title,
					status: order.status,
					status_text: order.status_text,
					people_num: order.people_num,
					person_info: order.person_info,
					time_range: order.time_range,
					skill_desc: order.skill_desc,
					address: order.address,
					distance_info: order.distance_info,
					salary: order.salary,
					// 补充侧边栏需要的字段
					orderId: order.id,
					createTime: order.create_time || new Date().toLocaleString(),
					description: order.description || '无详细描述',
					latitude: order.latitude || '',
					longitude: order.longitude || ''
				}
			};
			// 添加到聊天记录
			this.chatMessages.push(orderMessage);

			// 发送订单消息到服务器
			request({
				url: '/Kefu/sendToCustomerService',
				method: 'POST',
				data: {
					content: `订单: ${order.title}`,
					is_order: 1,
					order_id: order.task_id,
					// 传递完整订单信息
					order_info: JSON.stringify(orderMessage.orderInfo)
				},
				success: (res) => {
					if (res.data.code === 1) {
						uni.showToast({ title: '订单发送成功', icon: 'success' });
					} else {
						uni.showToast({ title: res.data.msg || '订单发送失败', icon: 'none' });
					}
				},
				fail: (err) => {
					console.error('发送订单消息失败', err);
					uni.showToast({ title: '网络异常，订单发送失败', icon: 'none' });
				}
			});

			// 关闭订单弹窗
			this.closeOrderModal();
			// 滚动到底部
			this.scrollToBottom();
		},
		// 切换主分类选项卡
		switchMainTab(index) {
			this.currentMainTab = index;
			this.currentStatusTab = 0; // 重置状态标签选中状态
			// 实际项目中应在此处从接口重新获取订单数据
		},
		// 切换状态标签
		switchStatusTab(index) {
			this.currentStatusTab = index;
			// 实际项目中应在此处从接口重新获取订单数据
		},
		// 直接使用后端返回的状态文本
		getStatusText(statusText) {
			return statusText;
		},
		// 根据状态文本获取样式
		getStatusStyles(statusText) {
			switch (statusText) {
				case '进行中':
					return { bg: '#EAFFE0', color: '#38AB00' };
				case '已结束':
					return { bg: '#EEF2F3', color: '#888B9A' };
				case '已取消':
					return { bg: '#FFF1F3', color: '#F71737' };
				case '待接单':
					return { bg: '#FFF3EB', color: '#F76F17' };
				case '已接单':
					return { bg: '#E9F1FF', color: '#5894F6' };
				default:
					return { bg: '#E0E0E0', color: '#000000' };
			}
		}

		// 使用status.js中的文本函数
		// getStatusText(status, orderType = 'order') {
		// 	return orderType === 'job' ? getJobStatusText(status) : getOrderStatusText(status);
		// },
	},
	// 页面加载完成后滚动到底部
	mounted() {
		this.scrollToBottom();
		// 监听WebSocket消息
		uni.$on('websocket-message', this.handleWebSocketMessage);
	},
	onLoad() {
		initBaseUrl();
		// 初始化WebSocket连接
		initWebSocket();
	},
	onShow(){
		// 获取本地存储
		const userInfo = uni.getStorageSync('userInfo');
		if (userInfo) {
			this.myAvatar = userInfo.avatar || '';
		}
	},
	onUnload() {
		// 页面卸载时关闭WebSocket连接和移除监听
		closeWebSocket();
		uni.$off('websocket-message', this.handleWebSocketMessage);
	},
	// 监听聊天消息变化，自动滚动
	watch: {
		chatMessages() {
			this.scrollToBottom();
		}
	}
};
</script>

<style lang="scss" src="./customerService.scss"></style>
